/**
 * Created by gengrong on 16/4/14.
 */
import { Form, Input, Modal, Upload, Icon } from 'antd';
import * as React from 'react';

class UserAddModalForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      createState: {}
    };
  }

  checkMobile(rule, value, callback) {
    if (/^1[\d]{10}$/.test(value)) {
      callback();
    } else {
      callback('请输入正确的手机号码')
    }
  }

  render() {
    const { getFieldProps, setFieldsValue } = this.props.form;

    const emailProps = getFieldProps('email', {
      rules: [
        { required: true, type: "email", message: '请填写用户邮件地址' }
      ],
      trigger: ['onBlur', 'onChange'],
    });
    const nikeProps = getFieldProps('nick', {
      rules: [
        { required: true, message: '请填写用户昵称' }
      ]
    });

    const uploadProps = {
      action: '/api/images/upload',
      listType: 'picture-card',
      onChange: (info) => {
        if (!info.file.response) {
          return;
        }
        this.setState({ logoFileList: info.fileList.slice(-1) });
        setFieldsValue({ avatar: info.file.response.url });
      }
    };

    const avatarProps = getFieldProps('avatar', {});

    const mobileProps = getFieldProps('mobile', {
      rules: [
        { required: true, message: '请正确填写用户手机号码' },
        { validator: this.checkMobile.bind(this) }
      ]
    });

    // TODO 密码应该提供初始化,而不是设置
    const passwordProps = getFieldProps('encryptedPassword', {
      rules: [
        { required: true, min: 8, message: '请填写用户初始化密码, 至少为8位' }
      ]
    });
    return (
      <Form horizontal form={this.props.form}>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="Email：">
          <Input {...emailProps} required placeholder="输入用户邮件地址"/>
        </Form.Item>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="昵称：">
          <Input {...nikeProps} placeholder="输入用户昵称"/>
        </Form.Item>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="手机号码：">
          <Input {...mobileProps} placeholder="输入用户手机号码"/>
        </Form.Item>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="初始化密码：">
          <Input {...passwordProps} placeholder="输入用户初始化密码"/>
        </Form.Item>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="头像：">
          <Input type='hidden' {...avatarProps}/>
          <Upload {...uploadProps} fileList={this.state.logoFileList}>
            <Icon type='plus'/>
            <div className='ant-upload-text'>上传图片</div>
          </Upload>
        </Form.Item>
      </Form>
    )
  }
}

UserAddModalForm = Form.create({})(UserAddModalForm);

class UserAddModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = { visible: false }
  }

  showModal(user = {}) {
    const form = this.refs.form
    if (form) {
      form.resetFields()
      form.setFieldsValue(user)
    }
    this.setState({
      visible: true,
      user: user,
      title: user.id ? "修改用户" : "新建用户"
    });
  }

  handleOk() {
    const {form} = this.refs;
    const {user = {}} = this.state
    const me = this;
    form.validateFieldsAndScroll((errors, values) => {
      if (!!errors) {
        return;
      }

      me.setState({
        confirmLoading: true
      });

      me.props.onSave(values)
        .then(()=> {
          this.hideModel()
        });
    })
  }

  hideModel() {
    this.setState({
      visible: false,
      confirmLoading: false
    });
  }

  handleCancel() {
    this.setState({
      visible: false
    });
  }

  render() {
    return (
      <Modal title={this.state.title}
        visible={this.state.visible}
        onOk={::this.handleOk}
        confirmLoading={this.state.confirmLoading}
        onCancel={::this.handleCancel}>
        <UserAddModalForm ref="form"/>
      </Modal>
    );
  }
}

export default UserAddModal;
